<template>
  <div>
    <h1>搜索</h1>
    <el-form>
      <el-input class="query" v-model="query" placeholder="请输入账号搜索" clearable @keyup.enter.native="getUserlist"></el-input>
      <el-button type="success" icon="el-icon-search" circle @click="getUserlist"
                 @keyup.enter.native="getUserlist"></el-button>
      <el-button type="success" @click="dialogFormVisible=true">用户注册</el-button>
    </el-form>
    <!--    注册表单-->
    <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="dialogFormVisible" @close="closeDialog('registerFormRef')">
      <el-form status-icon ref="registerFormRef" :model="registerInfo" :rules="registerFormRules">
        <el-form-item label="用户名" prop="username">
          <el-input class="register" type="text" v-model="registerInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input class="register" show-password type="password" v-model="registerInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input class="register" type="password" v-model="registerInfo.rePassword"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input class="register" type="text" v-model="registerInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input class="register" type="number" v-model="registerInfo.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input class="register" type="text" v-model="registerInfo.gender"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-input class="register" type="date" v-model="registerInfo.birthday"></el-input>
        </el-form-item>
        <el-form-item label="毕业学校" prop="school">
          <el-input class="register" type="text" v-model="registerInfo.school"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input class="register" type="tel" v-model="registerInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input class="register" type="email" v-model="registerInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="所学专业" prop="specialty">
          <el-input class="register" type="text" v-model="registerInfo.specialty"></el-input>
        </el-form-item>
        <el-form-item label="最高学历" prop="education">
          <el-input class="register" type="text" v-model="registerInfo.education"></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="reset('registerFormRef')">取 消</el-button>
        <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button>
      </div>
    </el-dialog>
    <h1>用户信息</h1>
    <el-table :data="userlist" border>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="name" label="真实姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="birthday" label="出生日期"></el-table-column>
      <el-table-column prop="school" label="毕业学校"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="email" label="电子邮箱"></el-table-column>
      <el-table-column prop="specialty" label="所学专业"></el-table-column>
      <el-table-column prop="education" label="最高学历"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="showEditDialog(scope.row.username)" type="text" size="small">编辑</el-button>
          <el-popconfirm
            confirm-button-text='确定'
            cancel-button-text='算了'
            icon="el-icon-info"
            icon-color="red"
            title="确定要删除这条内容吗？"
            @confirm=deleteInfo(scope.row.id)
          >
            <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!--编辑-->
    <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="editDialog">
      <el-form status-icon :model="editForm" ref="editFormRef"
      label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input class="register" type="text" v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input class="register" show-password type="password" v-model="editForm.password"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input class="register" type="text" v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input class="register" type="number" v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input class="register" type="text" v-model="editForm.gender"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-input class="register" type="date" v-model="editForm.birthday"></el-input>
        </el-form-item>
        <el-form-item label="毕业学校" prop="school">
          <el-input class="register" type="text" v-model="editForm.school"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input class="register" type="tel" v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input class="register" type="email" v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="所学专业" prop="specialty">
          <el-input class="register" type="text" v-model="editForm.specialty"></el-input>
        </el-form-item>
        <el-form-item label="最高学历" prop="education">
          <el-input class="register" type="text" v-model="editForm.education"></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="editDialog=false">取 消</el-button>
        <el-button type="primary" @click="editInfo('editFormRef')">提交修改</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import Qs from "qs";
  export default {
    name: "userInfo",
    data() {
      // 验证两次密码正误
      const validatePsdCheck = (rule, value, callback) => {
        if (value.length < 1) {
          return callback(new Error('重复密码不能为空！'));
        } else if (value !== this.registerInfo.password) {
          return callback(new Error('两次输入密码不一致！'));
        } else {
          callback()
        }
      }

      return {
        //搜索框查询
        query: '',
        //获取用户列表的数据
        userlist: [],
        //加载
        loading: false,
        //注册信息
        registerInfo: {},
        //用户编辑信息对象
        editForm:{},
        //用户编辑对话框开关
        editDialog:false,
        //用户注册对话框开关
        dialogFormVisible: false,

        registerFormRules: {
          username: [
            //validator:this.validators.validateCode
            {required: true, message: '请输入账号', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},
          ],
          password: [
            //validator: this.validators.validatePsdReg
            {required: true,message: '请输入密码', trigger: 'blur'},
            {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'},
          ],
          rePassword: [
            {required: true,validator:validatePsdCheck, trigger: 'blur'},
          ],
          // phone: [
          //   {required: true,validator: this.validators.validatePhone, trigger: 'blur'},
          // ],
          // email: [
          //   {required: true,validator: this.validators.validateEMail, trigger: 'blur'},
          // ],
        },
      }
    },

    created() {
      this.getUserlist()
    },

    methods: {
      //获得用户表单数据
      async getUserlist() {
        let _this = this;
        await this.$axios.post('/api/user/allInfo', Qs.stringify({
          username: _this.query,
        })).then((res) => {
          console.log(res);
          if (res.data.code !== 200) {
            return _this.$message.error("用户数据获取失败")
          }
          _this.userlist = res.data.data
          console.log(res)
        })
      },

      //注册功能
      register(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            let _this = this;
            const {data:res} = await this.$axios.post("/api/user/register", Qs.stringify(_this.registerInfo))
              console.log(res);
              if (res.code === 200) {
                console.log(res.message);
                _this.dialogFormVisible = false;
                return _this.$message.success(res.message);
              }else{
                return _this.$message.error(res.message);
                console.log(res.message);
              }
          } else {
            return _this.$message.error("用户信息为空,请输入");
          }
        })
      },
      //重置表单
      reset(formNameRef) {
        this.$refs[formNameRef].resetFields();
        this.dialogFormVisible = false;
      },
      //右上角X 关闭注册对话框 重置表单
      closeDialog(formNameRef){
        this.$refs[formNameRef].resetFields();
      },

      //展示编辑之前的信息
      async showEditDialog(userName){
        console.log(userName);
        const {data:res} = await this.$axios.post("/api/user/getOneInfo", Qs.stringify({username: userName}))
        console.log(res)
        if(res.code!==200){
          this.$message.error(res.message);
        }
        this.editForm=res.data
        console.log(res.data)
        this.editDialog=true
      },

      //确认修改方法
      async editInfo(formName){
        this.$refs[formName].validate(async valid => {
          if (!valid) return this.$message.error("参数错误");
          let _this = this;
          const {data: res} = await _this.$axios.put("/api/user/editOneInfo/", Qs.stringify({
            id: _this.editForm.id,
            username: _this.editForm.username,
            password: _this.editForm.password,
            name: _this.editForm.name,
            age: _this.editForm.age,
            gender: _this.editForm.gender,
            birthday: _this.editForm.birthday,
            school: _this.editForm.school,
            phone: _this.editForm.phone,
            email: _this.editForm.email,
            specialty: _this.editForm.specialty,
            education: _this.editForm.education,
          }))
          console.log(res)
          if (res.code !== 200) {
            return _this.$message.error(res.message);
          }
          _this.editDialog = false;
          _this.getUserlist();
          _this.$message.success(res.message);
        })
      },

      //删除一条信息
     async deleteInfo(id) {
       let _this = this;
        console.log(id);
        const {data:res} = await _this.$axios.post("/api/user/deleteInfo",Qs.stringify({id:id}))
        console.log(res)
        if(res.code!==200){
         return _this.$message.error(res.message);
        }
        this.getUserlist();
        return _this.$message.success(res.message);
      }
    }
  }
</script>

<style scoped>
  .query {
    width: 200px;
  }

  .register-button {
    text-align: center;
  }

  .register{
  }

</style>
